﻿<template>
  <div>
    <!-- 标题栏 -->
    <NavBar
      :title="$route.meta.title"
      :rightBtn="rightBtn"
      @handleIcon="hanldleRight"
    >
    </NavBar>
    <van-pull-refresh v-model="loading" @refresh="getDataList">
      <van-list>
        <van-swipe-cell v-for="item in sortedUserDatas" :key="item.Id">
          <van-cell @click="selectData(item)">
            <template #icon>
              <van-image
                :class="{ gray: item.Online === false }"
                width="39"
                height="39"
                alt="avatar"
                radius="5"
                :src="item.Avatar | AvatarFilter"
              />
            </template>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span>{{ item.UserName }}</span>
            </template>
            <template #label>
              <span>{{ item.LastMessage }}</span>
            </template>
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              {{ item.LastDateTime | filterDate }}
            </template>
          </van-cell>
        </van-swipe-cell>
        <template #right>
          <van-button
            square
            text="编辑"
            type="info"
            style="height:100%; margin-left:1px"
            @click="handleEdit([item.Id])"
          />
        </template>
      </van-list>
    </van-pull-refresh>
    <new-group-form ref="editForm" :afterSubmit="getDataList"></new-group-form>
  </div>
</template>

<script>
import { D_UserMessage_GetUserList } from "@/api/D_Manage/D_UserMessage";
import NavBar from "@/components/NavBar";
import NewGroupForm from "./NewGroupForm";

import { mapGetters } from "vuex";
import moment from "moment";

var messageType = 2;
var readmessageType = 6;

export default {
  components: {
    NavBar,
    NewGroupForm
  },
  mounted() {
    this.getDataList();
    this.socketApi.addcallback(this.getConfigResult, messageType);
    this.rightBtn.number++;
    this.rightBtn.iconName.unshift("plus");
  },
  data() {
    return {
      rightBtn: {
        number: 0,
        iconName: []
      },
      userdatas: [],
      localdatas: JSON.parse(localStorage.getItem("userdatas")) || [],
      loading: false
    };
  },
  computed: {
    ...mapGetters(["hasPerm", "userInfo"]),
    sortedUserDatas() {
      return this.userdatas.slice().sort((a, b) => this.mysort(a, b));
    }
  },

  methods: {
    getDataList() {
      this.loading = true;
      D_UserMessage_GetUserList().then(resJson => {
        this.loading = false;
        this.userdatas = resJson.Data;
        if (this.localdatas) {
          this.userdatas.forEach(item => {
            let tempdata = this.localdatas.find(d => d.UserId === item.UserId);
            if (tempdata) {
              item.LastDateTime = tempdata.LastDateTime;
              item.LastMessage = tempdata.LastMessage;
            }
          });
        }
      });
    },
    getConfigResult(res) {
      // 接收回调函数返回数据的方法
      let resmsg = res;

      if (resmsg.CreatorId != this.userInfo.Id) {
        let tempdata = null;
        if (!resmsg.GroupId) {
          tempdata = this.userdatas.find(d => d.UserId === resmsg.CreatorId);
        } else {
          tempdata = this.userdatas.find(d => d.UserId === resmsg.GroupId);
        }
        if (tempdata) {
          tempdata.LastDateTime = resmsg.CreateTime;
          tempdata.LastMessage = resmsg.Text;
        }
      }
    },
    selectData(item) {
      this.$router.push({
        name: "/D_Manage/D_UserMessage/ChatForm",
        params: { title: item.UserName, user: JSON.stringify(item) }
      });
    },
    saveUserDatas() {
      localStorage.setItem("userdatas", JSON.stringify(this.userdatas));
    },
    mysort(a, b) {
      if (a.Online && b.Online) {
        if (a.LastDateTime && b.LastDateTime) {
          return a.LastDateTime > b.LastDateTime ? -1 : 1;
        } else if (a.LastDateTime) {
          return -1;
        } else {
          return 1;
        }
      } else if (a.Online) {
        return -1;
      } else {
        return 1;
      }
    },
    hanldleRight(item) {
      this.hanldleAdd();
    },
    hanldleAdd() {
      this.$refs.editForm.openForm();
    },
    handleEdit(item) {
      if (item.IsGroup) {
        this.$refs.editForm.openForm(item.UserId);
      }
    }
  },

  watch: {
    userdatas: {
      handler: "saveUserDatas",
      deep: true
    }
  },
  filters: {
    filterDate: function(time) {
      if (time !== null && time !== "") {
        var date = new Date(time);
        var todaysDate = new Date();
        if (date.getDate() === todaysDate.getDate()) {
          return moment(date).format("HH:mm:ss");
        } else {
          return moment(date).format("YYYY-MM-DD");
        }
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="less" scoped>
.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  opacity: 0.7; //通过改变透明度来调节灰色的程度
}

.content {
  display: inline-block;
  padding: 1.5vh;
  background: #fff;
}

.selected {
  background: #9eea6a;
  // color: white;
}
</style>
